    <template> 
    <div class="container" >
       <div>
           <input class="form-control" placeholder="请输入角色名称" v-model="formData.roleName">
           <button class="btn"  @click="queryRoleData" title="查询"><el-icon><Search/></el-icon></button>
           <AllowMenu :selection="selection"></AllowMenu>
       </div>
       <el-config-provider :locale="locale"> 
       <el-table ref="userTableRef" :data="tableData" :height="height" stripe style="width: 100%" @select="selectData"> 
       <el-table-column type="selection" width="55"/>
       <el-table-column prop="roleName" label="角色名称"/>
       <el-table-column prop="remarks" label="备注"/>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope"> 
           <a class="btn" title="编辑"><el-icon><Edit/></el-icon></a>
           <a class="btn" title="分配菜单" @click="allowMenu(scope.row)"> <el-icon><Setting/></el-icon></a>
         </template>
       </el-table-column> 
     </el-table> 
       <nav class="tr">
           <el-pagination
           v-model:current-page="formData.page"
           v-model:page-size="formData.rp"
           :page-sizes="[100, 20, 50, 100]"
           layout="sizes, prev, pager, next,total"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
   
           /> 
       </nav>
   </el-config-provider>
    </div>
   </template>
   <script>
   import { Edit,Setting,Search} from '@element-plus/icons-vue';
   import AllowMenu from './components/AllowMenu.vue';
    export default {
       name: 'APP',
       components:{
           Edit,Setting,Search,AllowMenu
       },
       data: function(){ 
       return {
           height:200,
            tableData:[],
            total:0,
            formData:{
               page:1,
               rp:10,
               roleName:""
            },
            userList:[],
            selection:[]
            
       }
       },
       methods:{
        queryRoleData(){
               var that = this;
               window.http.post('/api/role/queryRoleList',this.formData).then(res => {
                  
                  var data = res.data;
                  that.tableData = data;
               }) 
               .catch(function(error){
                  that.$message.error('服务器异常');
               });
               window.http.post('/api/role/queryRoleTotal',this.formData).then(res => {
                  
                  var data = res.data;
                  if(data.success){
                   that.total = data.total;
                  }
               }) 
               .catch(function(error){
                  that.$message.error('服务器异常');
               })
           },
           handleSizeChange(){
               this.queryRoleData();
           },
           handleCurrentChange(){
               this.queryRoleData();
           },
           selectData(selection){
            this.selection = selection;
           },
           allowMenu(row){
            // alert(JSON.stringify(row));
            this.$bus.emit("openAllowMenuDialog",row);
           },
       },
       mounted(){
           var app =document.getElementById("app");
           this.height=app.clientHeight-100;
           this.queryRoleData();
       }
       }
   </script>
   <style>
       html,
       body, 
       #app{
       height: 100%;
       }
   </style>
   <style scoped> 
       .container {
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 100%;
   
    }
    .tr{
    width: 100%;
    flex-basis: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
    align-items: center;
    }
    .second{
    background-color: aqua;
    }
    .form-control{
       display: inline-block;
       width: 200px;
       margin-right: 10px;
    }
    .btn{
       margin-right: 5px;
   
    }
    
   </style> 